<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>

<head>
  <base href="/oa1/" />
  <title>襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <style>
    /*定义类名为.thead-blue的样式*/
    .thead-blue {
      color: #fff;
      font-weight: bold;
      background-color: #337ab7;
    }
  </style>
  <script src="static/jquery/jquery-1.10.2.min.js"></script>
  <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 搜索 -->
<div class="panel panel-primary">
  <div class="panel-heading">
    <h4 class="panel-title">通知公告搜索</h4>
  </div>
  <div class="panel-body">
    <form action="xx/information/listInformation" id="seachform" method="post"
          class="form-horizontal" role="form">
      <div class="form-group">
        <div class="col-md-5">
          <label for="title" class="col-md-4 control-label">消息标题</label>
          <div class="col-md-8">
            <input type="text" id="title" name="title" class="form-control"
                   placeholder="请输入消息标题" value="${searchTitle}">
            <input type="hidden" name="page" id="page" value="1">
            <input type="hidden" name="pageSize" id="pageSize" value="5">
          </div>
        </div>
        <div class="col-md-5">
          <label for="creator" class="col-md-4 control-label">发布人</label>
          <div class="col-md-8">
            <input type="hidden" id="creator" name="creator" value="${searchCreator}">
            <div class="input-group">
              <input type="text" id="empName" name="empName"
                     readonly="readonly" class="form-control" placeholder="请选择员工"
                     value="">
              <span class="input-group-btn">
                <button class="btn btn-info" type="button" data-toggle="modal"
                        data-target="#selectempModal">请选择</button>
              </span>
            </div>
          </div>
        </div>
        <div class="col-md-2">
          <div class="col-md-12">
            <a type="button" href="xx/information/toAddInformation" class="btn btn-info">发布通知</a>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-md-5">
          <label for="typeid" class="col-md-4 control-label">消息类型</label>
          <div class="col-md-8">
            <select id="typeid" name="typeid" class="form-control">
              <option value="">--请选择--</option>
              <option value="1" <c:if test="${searchTypeid == '1'}">selected</c:if>>公司新闻</option>
              <option value="2" <c:if test="${searchTypeid == '2'}">selected</c:if>>通知公告</option>
            </select>
          </div>
        </div>
        <div class="col-md-5">
          <label for="publishDate" class="col-md-4 control-label">发布时间</label>
          <div class="col-md-8">
            <input type="date" id="publishDate" name="publishDate"
                   class="form-control" value="${searchPublishDate}">
          </div>
        </div>
        <div class="col-md-2">
          <div class="col-md-12">
            <button type="button" onclick="searchBtn()" class="btn btn-success">搜索消息</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- 列表 -->
<div class="panel panel-primary">
  <table class="table table-bordered table-hover">
    <thead>
    <tr class="thead-blue" align="center">
      <td>消息类型</td>
      <td>消息标题</td>
      <td>发布人</td>
      <td>发布时间</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <c:choose>
      <c:when test="${empty pageInfo.records}">
        <tr align="center">
          <td colspan="5">没有找到匹配的记录</td>
        </tr>
      </c:when>
      <c:otherwise>
        <c:forEach items="${pageInfo.records}" var="info">
          <tr align="center">
            <td>
              <c:choose>
                <c:when test="${info.typeid == 1}">公司新闻</c:when>
                <c:when test="${info.typeid == 2}">通知公告</c:when>
                <c:otherwise>未知类型</c:otherwise>
              </c:choose>
            </td>
            <td>${info.title}</td>
            <td>
              <c:forEach items="${employees}" var="employee">
                <c:if test="${info.creator eq employee.oid}">
                  ${employee.empName}
                </c:if>
              </c:forEach>
            </td>
            <td>${info.publishDateStr}</td>
            <td>
              <a href="xx/information/informationInfo?oid=${info.oid}" class="btn btn-info btn-xs">查看详情</a>
              <button onclick="updateInformal(${info.oid}, '${info.publishDateStr}')" class="btn btn-primary btn-xs">修改</button>
              <button onclick="deleteInformal(${info.oid})" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#confirmModal">删除</button>
            </td>
          </tr>
        </c:forEach>
      </c:otherwise>
    </c:choose>
    </tbody>
  </table>
</div>

<!-- 分页 -->
<div class="input-group col-md-7 col-md-offset-3">
  <div class="row">
    <div class="btn-group">
      <button onclick="gotoPage(1, ${pageInfo.size})"
              class="btn btn-primary <c:if test='${pageInfo.current == 1}'>disabled</c:if>">首页</button>

      <button onclick="gotoPage(${pageInfo.current - 1}, ${pageInfo.size})"
              class="btn btn-primary <c:if test='${pageInfo.current == 1}'>disabled</c:if>">上一页</button>

      <button class="btn btn-primary disabled">当前第${pageInfo.current}/${pageInfo.pages}页</button>

      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          每页显示${pageInfo.size}条 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
          <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
          <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
          <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
        </ul>
      </div>

      <button class="btn btn-primary disabled">共${pageInfo.total}条记录</button>

      <button onclick="gotoPage(${pageInfo.current + 1}, ${pageInfo.size})"
              class="btn btn-primary <c:if test='${pageInfo.current == pageInfo.pages}'>disabled</c:if>">下一页</button>

      <button onclick="gotoPage(${pageInfo.pages}, ${pageInfo.size})"
              class="btn btn-primary <c:if test='${pageInfo.current == pageInfo.pages}'>disabled</c:if>">尾页</button>
    </div>
  </div>
</div>

<br>
<br>
<br>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="confirmModalLabel">
          提示
        </h4>
      </div>
      <div class="modal-body">
        确认删除吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
        <button type="button" id="subconfirm" class="btn btn-primary">
          提交更改
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $("#subconfirm").click(function(){
      deleteConfirm();
      $('#confirmModal').modal('hide');
    });
  });
</script>

<!-- 选择员工模态框 -->
<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
      </div>
      <div class="modal-body">
        <form action="" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="dept" class="col-md-4 control-label">所属部门</label>
            <div class="col-md-5">
              <select name="dept" class="form-control" id="dept">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="job" class="col-md-4 control-label">所属职位</label>
            <div class="col-md-5">
              <select name="job" class="form-control" id="job">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="emp" class="col-md-4 control-label">员工信息</label>
            <div class="col-md-5">
              <select name="emp" class="form-control" id="emp" size="10">
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sub" class="btn btn-primary">确认选择</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    // 加载部门数据
    $.getJSON("dept/listDeptUseSelect",function(listdept){
      var dept = $("#dept")[0];
      dept.options.length=1;
      for(var i=0;i<listdept.length;i++){
        var d = listdept[i];
        dept.options.add(new Option(d.deptName,d.oid));
      }
    });

    // 部门变更事件
    $("#dept").change(function(){
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
      if(this.value==""){
        return;
      }

      // 加载职位数据
      $.getJSON("dept/listDeptJobUseSelect",{deptid:this.value},function(listjob){
        var job = $("#job")[0];
        job.options.length=1;
        for(var i=0;i<listjob.length;i++){
          var job1 = listjob[i];
          job.options.add(new Option(job1.name,job1.oid));
        }
      });

      // 加载员工数据
      $.getJSON("emp/listEmpUseSelete",{deptid:$("#dept").val()},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    // 职位变更事件
    $("#job").change(function(){
      $.getJSON("emp/listEmpUseSelete",{deptid:$("#dept").val(),jobid:this.value},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    // 确认选择员工
    $("#sub").click(function(){
      var eid=$("#emp").val();
      if(eid!=null){
        var empName=$("#emp option:selected").text();
        setempvalue(eid,empName);
        $('#selectempModal').modal('hide');
      }else{
        alert("请选择员工");
      }
    });

    // 模态框显示前重置
    $('#selectempModal').on('show.bs.modal',function() {
      $("#dept").val("");
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
    });
  });
</script>

<!-- 提示消息模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="alertMsgModalLabel">
          提示
        </h4>
      </div>
      <div class="modal-body" id="alertmsg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  // 全局错误处理
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){ // 没有权限
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      console.log("服务器错误!");
    }
  });

  // 设置选择的员工信息
  function setempvalue(eid, empName) {
    $("#creator").val(eid);
    $("#empName").val(empName);
  }

  // 分页跳转
  function gotoPage(page,pageSize){
    $("#page").val(page);
    $("#pageSize").val(pageSize);
    $("#seachform").submit();
  }

  // 搜索按钮
  function searchBtn(){
    $("#page").val(1); // 重置为第一页
    $("#seachform").submit();
  }

  // 修改信息
  function updateInformal(oid, publishDateStr){
    var pDate = new Date(publishDateStr);
    var now = new Date();
    now.setMinutes(now.getMinutes() - 10); // 10分钟前

    if(now < pDate){
      document.location.href="xx/information/toUpdateInformation?oid="+oid;
    }else{
      $("#alertmsg").text("只可修改10分钟以内发布的新闻！");
      $('#alertMsgModal').modal('show');
    }
  }

  // 删除信息
  var deleteoid;
  function deleteInformal(oid){
    deleteoid = oid;
  }

  // 确认删除
  function deleteConfirm(){
    $.get("xx/information/deleteInformal",{"oid":deleteoid},function(s){
      if(s == true){
        document.location.href="xx/information/listInformation";
      }else{
        $("#alertmsg").text("删除失败!");
        $('#alertMsgModal').modal('show');
      }
    });
  }
</script>
</body>
</html>